import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import Search from './components/search';
import Detail from './components/detail';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import AxColumnAction from '@/components/AxList/AxColumnAction';

const Index: React.FC<any> = props => {
    const [expandedRowKeys, setExpandedRowKeys] = useState([]);
    /** 配置列 */
    const columns: any = [
        {
            title: '订单编号',
            dataIndex: 'orgName1',
            width: axconst.width.long,
        },
        {
            title: '产品名称',
            dataIndex: 'orgName2',
            width: axconst.width.longx,
        },
        {
            title: '订货单位',
            dataIndex: 'orgName10',
            width: axconst.width.long,
        },
        {
            title: '收货人',
            dataIndex: 'orgName11',
            width: axconst.width.long,
        },
        {
            title: '收货时间',
            dataIndex: 'orgName3',
            width: axconst.width.time,
        },
        {
            title: '收货单位',
            dataIndex: 'orgName12',
            width: axconst.width.long,
        },
        {
            title: '合计',
            dataIndex: 'orgName8',
            width: axconst.width.fouronly,
        },
        {
            title: '订单状态',
            dataIndex: 'orgName9',
            width: axconst.width.fouronly,
        },
        {
            title: '操作',
            dataIndex: 'orgName20',
            width: axconst.width.operate4,
            render: (val: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '结算申请',
                            group: false,
                            onClick: () => { },
                        },
                    ]}
                />
            ),
        },
    ];

    const data = {
        list: [{
            id: '1',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }, {
            id: '2',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }, {
            id: '3',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }, {
            id: '4',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }, {
            id: '5',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }, {
            id: '6',
            orgName1: 'OD-54545D45451',
            orgName2: '购买探月工程燃料',
            orgName3: '2020-01-02 11:00:00',
            orgName4: '2',
            orgName5: '李四',
            orgName6: '15828549701',
            orgName7: '15828549702',
            orgName8: '4000',
            orgName9: '处理中',
            orgName10: '川北实验室',
            orgName11: '李四',
            orgName12: '川北实验室',
        }]
    }

    const handleExpandedRowsChange = (expandedRows: any) => {
        setExpandedRowKeys(expandedRows);
    };

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [
        {
            text: '发起结算',
            icon: 'plus',
            // onClick: () => setCreateVisible(true),
        }];

    const filter: AxStandardCardFilterType[] = []

    return (
        <>
            <AxStandardWideList
                columns={columns}
                button={button}
                filter={filter}
                data={data}
                checkboxModel={false}
                AdvancedSearch={Search}
                expandedRowKeys={expandedRowKeys}
                onExpandedRowsChange={handleExpandedRowsChange}
                expandedRowRender={(record: any) => (
                    <Detail schemeId={record.id} />
                )}
            />
        </>
    );
};

export default Index;
